<template>
  <div v-if="list.length > 0" class="detail-logistics">
    <p>
      <span>{{ list[0].text }}</span>
      <span>{{ list[0].time }}</span>
    </p>
    <a href="javascript:;" @click="openDialog">查看物流</a>
  </div>
  <!-- 查看物流对话框组件 -->
  <OrderLogistics ref="orderLogisticsRef"></OrderLogistics>
</template>

<script>

import OrderLogistics from '@/components/member/OrderLogistics'
import API from '@/api/order'
import { ref } from 'vue'

export default {
  name: 'DetailLogistics',
  components: { OrderLogistics },
  props: {
    order: {
      type: Object,
      default: () => ({})
    }
  },
  // 组件实例化的时候需要执行setup, 因为需要返回
  // 如果把setup改成了async ()
  setup(props) {
    // const res = await API.logisticsOrder(props.order.id)
    // const list = ref(res.result.list)
    // // 这个打印list.value有效果, 说明 await的效果起作用了
    // // 实现将异步操作同步化处理
    // console.log(list.value)
// 查看物流组件的ref
    const orderLogisticsRef = ref(null)

    const list = ref([])
    API.logisticsOrder(props.order.id)
        .then((res) => {
          list.value = res.result.list
        })

    /**
     * 打开物流对话框
     */
    const openDialog = () => {
      // 打开物流对话框
      orderLogisticsRef.value.open(props.order)
    }

    return {
      list,
      orderLogisticsRef,
      openDialog
    }
  }
}
</script>

<style lang="less" scoped>
.detail-logistics {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 30px;
  margin: 30px 50px 0;

  background-color: #f5f5f5;

  > p {
    color: #999;

    span {
      &:first-child {
        margin-right: 30px;
      }
    }
  }

  a {
    color: @xtxColor;
  }

}
</style>
